<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <img src="@/assets/images/login-bg.jpg" alt="旅游风景" />
      </div>
      <div class="login-right">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <h3 class="title">长隆旅游社</h3>

          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="账号">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>

          <el-button :loading="loading" type="primary" class="login-btn" @click.native.prevent="handleLogin">
            登录
          </el-button>

          <div class="tips">
            <span>还没有账号？</span>
            <router-link to="/register" class="register-link">立即注册</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      try {
        await this.$refs.loginForm.validate()
        this.loading = true
        const res = await login(this.loginForm)
        if (res.code === 200) {
          this.$store.commit('user/SET_TOKEN', res.data.token)
          this.$store.commit('user/SET_USER_ID', res.data.userId)
          // 获取用户信息
          await this.$store.dispatch('user/getUserInfo')
          this.$router.push('/')
          this.$message.success('登录成功')
        }
      } catch (error) {
        console.error(error)
        this.$message.error(error.message || '登录失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(to right, #24243e, #302b63, #0f0c29);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .login-box {
    width: 1000px;
    height: 600px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    overflow: hidden;
    animation: fadeIn 0.5s ease-out;

    .login-left {
      flex: 1;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .login-right {
      flex: 1;
      padding: 40px;
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.95);
    }
  }

  .login-form {
    width: 100%;
    padding: 0 20px;

    .title {
      font-size: 26px;
      color: #302b63;
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: bold;
      letter-spacing: 2px;
    }

    .el-input {
      background: transparent;

      ::v-deep input {
        height: 48px;
        line-height: 48px;
        background: #f5f7fa;
        border: none;
        border-radius: 24px;
        color: #606266;
        padding-left: 45px;

        &:focus {
          background: #fff;
          box-shadow: 0 0 10px rgba(48, 43, 99, 0.1);
        }
      }

      ::v-deep .el-input__prefix {
        left: 16px;
        color: #909399;
      }
    }

    .login-btn {
      width: 100%;
      height: 48px;
      border-radius: 24px;
      font-size: 16px;
      margin-top: 10px;
      background: linear-gradient(to right, #24243e, #302b63);
      border: none;

      &:hover {
        background: linear-gradient(to right, #302b63, #24243e);
      }
    }

    .tips {
      font-size: 14px;
      color: #606266;
      margin-top: 20px;
      text-align: center;

      .register-link {
        color: #302b63;
        margin-left: 8px;
        text-decoration: none;
        font-weight: bold;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
